<template>
<section class="page-content">
    <div v-loading="loading" class="loading">
      <div class="order-detail" >
        <el-row>
          <el-col :span="24">
            打分
          </el-col>
          <el-col :span="8" v-if="parent !== null">
            <ul>
              <li><span class="item">工作打分：</span> <span>{{tableData.work_fraction}}</span></li>
              <li><span class="item">创新打分：</span> <span>{{tableData.innovate_fraction}}</span></li>
              <li><span class="item">稳定打分：</span> <span> {{tableData.stabilize_fraction}}</span></li>
              <li><span class="item">婚姻打分：</span> <span> {{tableData.marriage_fraction}}</span></li>
              <li><span class="item">健康打分：</span> <span> {{tableData.fitness_fraction}}</span></li>
              <li><span class="item">收入打分：</span> <span> {{tableData.income_fraction}}</span></li>
              <li><span class="item">能力打分：</span> <span> {{tableData.capacity_fraction}}</span></li>
            </ul>
          </el-col>
        </el-row>
        <div class="line"></div>
        <el-row>
          <el-col :span="24">
            建议
          </el-col>
          <el-col :span="8" v-if="parent !== null">
            <ul>
              <li><span class="item">工作建议：</span> <span>{{tableData.work_proposal}}</span></li>
              <li><span class="item">创新建议：</span> <span>{{tableData.innovate_proposal}}</span></li>
              <li><span class="item">稳定建议：</span> <span> {{tableData.stabilize_proposal}}</span></li>
              <li><span class="item">婚姻建议：</span> <span> {{tableData.marriage_proposal}}</span></li>
              <li><span class="item">健康建议：</span> <span> {{tableData.fitness_proposal}}</span></li>
              <li><span class="item">收入建议：</span> <span> {{tableData.income_proposal}}</span></li>
              <li><span class="item">能力建议：</span> <span> {{tableData.capacity_proposal}}</span></li>
              <li><span class="item">其他建议：</span> <span> {{tableData.else_proposal}}</span></li>
            </ul>
          </el-col>
        </el-row>
        <div class="line"></div>
      </div>
    </div>
   </section>
</template>
<script>
  import {generateUrl} from '@/utils/helpers'
  export default {
    data () {
      return {
        loading: false,
        downloadLoading: false,
        tableData: {
          first_page_url: '',
          from: '',
          to: '',
          last_page: '',
          last_page_url: '',
          next_page_url: '',
          prev_page_url: '',
          path: '',
          per_page: 0,
          total: 0,
          data: []
        },
        parent: [],
        recommendation: [],
        recommenitem: [],
        searchData: {
          user_id: '',
          type: ''
        },
        usercomng: '',
        params: {
          page_size: 20,
          page: 1
        },
        // dialog
        editLoading: false,
        visible: false,
        formData: {
          id: null,
          name: '',
          display_name: '',
          description: ''
        }
      }
    },
    mounted () {
      this._getData()
      if (!this.$store.state.auth.userInfo) {
        this.$store.dispatch('getUserInfo')
      }
    },
    watch: {
      params: {
        deep: true,
        handler (newValue) {
          this._getData()
        }
      }
    },
    computed: {
      userInfo () {
        return this.$store.getters.userInfo
      }
    },
    methods: {
      _getData () {
        let url = generateUrl('/yiJing/' + this.$route.params.id, this.params)
        this.loading = true
        this.$http.get(url).then((response) => {
          this.loading = false
          this.tableData = response.data
          console.log(this.recommendation)
        }).catch((error) => {
          this.loading = false
          console.log(error)
        })
      }
    }
  }
</script>
<style scoped lang="scss">
.loading {
  min-height: 200px;
}
.order-detail {
  border: 1px solid #2cbca3;
  width: 1000px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  .line {
    border-top: solid 1px #ebeef5;
    padding: 5px 0;
  }
  ul {
    list-style: none;
    font-size: 13px;
    padding: 0;
    li {
      color: #333;
      line-height: 22px;
      .item {
        color: #999;
        width: 100px;
        text-align: right;
        display: inline-block;
      }
    }
  }
}
.tips {
  font-size: 13px;
  color: #999;
}
</style>
<style type="text/css">
  .header-th {
    background: #edfbf8 !important;
  }
</style>
